<template>
  <div>
    <!-- 生物测量 -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>

    <ul class="img_box_ul">
      <li class="img_box_li">
        <el-image src="https://file.supore.cn/1748240225AL.png" class="img" />
        <ul class="report_point">
          <li>AL:眼轴长度(mm)</li>
          <li>CCT:角膜厚度(mm)</li>
          <li>AD:前房深度(mm)</li>
          <li>LT:晶体厚度(mm)</li>
          <li>VT:玻璃体厚度(mm)</li>
          <li>AL/CR:轴比</li>
        </ul>
      </li>
      <li class="img_box_li">
        <el-image src="https://file.supore.cn/1748240242wtw.png" class="img" />
        <ul class="report_point">
          <li>K1:角膜曲率(D)</li>
          <li>K2:角膜曲率(D)</li>
          <li>AST:角膜散光(D)</li>
          <li>PS:瞳孔直径(mm)</li>
          <li>WTW:白到白距离(mm)</li>
          <li>PD:瞳距(mm)</li>
        </ul>
      </li>
    </ul>
    <OD_OS
      title="OD / 右眼"
      :regionId="props.regionId"
      lowerName="right"
      capName="Right"
      directionName="右眼"
      :dbClickPlaceholder="props.dbClickPlaceholder"
      :od_os_data="props.od_os_data"
    />
    <OD_OS
      title="OS / 左眼"
      :regionId="props.regionId"
      lowerName="left"
      capName="Left"
      directionName="左眼"
      :dbClickPlaceholder="props.dbClickPlaceholder"
      :od_os_data="props.od_os_data"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";
import OD_OS from "./OD_OS.vue";

onMounted(() => {});

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
  od_os_data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

<style scoped lang="scss">
.img_box_ul {
  @apply w-full min-h-[9rem] flex justify-between text-[0.6rem];

  .img_box_li {
    @apply w-[49.5%] flex items-center bg-[#f5f5f5] rounded p-1 box-border;

    .img {
      @apply max-w-[7rem] max-h-[7rem];
    }
    .report_point {
      @apply h-full ml-[2rem] flex flex-col justify-around box-border;
    }
  }
}
</style>